<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NL4DV | Vega-Lite Editor</title>

    <link rel='shortcut icon' type='image/x-icon' href="{{ url_for('vleditor.static', filename='img/favicon.ico') }}"/>

    <!--Vendor CSS files-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link href="https://cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.dataTables.min.css">
    <link href="https://cdn.jsdelivr.net/npm/json-tree-viewer@0.0.1/libs/jsonTree/jsonTree.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.51.0/codemirror.min.css" />

    <!--Custom CSS files-->
    <link href="{{ url_for('vleditor.static', filename='css/style.css') }}" rel="stylesheet">

</head>
<body>
<div class="container-fluid">
    <center><h3>Vega-Lite Editor with NL4DV</h3></center>
    <br/>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="form-group text-center" style="position:relative;">
                <div class="input-group">
                    <span class="input-group-btn">
                        <select class="form-control display-inline" style="width:150px; border-right: 0;"
                                id="datasetSelect">
                            <option value="movies-w-year.csv" selected="selected">Movies</option>
                            <option value="olympic_medals.csv">Olympic Medals</option>
                            <option value="cars-w-year.csv">Cars</option>
                            <option value="housing.csv">Housing</option>
                            <option value="colleges.csv" >Colleges</option>
                            <option value="euro.csv" >Euro</option>
                            <option value="superstore.csv" >Superstore</option>
                            <option value="nba-mvp.csv" >NBA MVP</option>
                        </select>
                    </span>
                    <span class="input-group-btn"><a style="border-right: 0; border-radius: 0" class="btn btn-default"
                                                     type="button" data-toggle="collapse" href="#dataDomainCollapse">
                            <i class="fa fa-database"></i>
                        </a>
                    </span>
                    <input type="search" class="form-control" id="queryInput" placeholder="Type your query here...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" id="queryBtn">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>&nbsp;&nbsp;Execute
                        </button>
                    </span>
                </div>
                <div class="collapse absolute-collapse-panel p-md" id="dataDomainCollapse">
                    <span class="text-muted pull-left">
                        Dataset:&nbsp;&nbsp;<strong id="datasetUrl"></strong>
                    </span>
                    <span class="pull-right">
                        <span class="text-muted"># Rows:</span>&nbsp;<strong id="rowCount"></strong>&nbsp;&nbsp;
                        <span class="text-muted"># Columns:</span>&nbsp;<strong id="columnCount"></strong>
                    </span>
                    <br/>
                    <hr>
                    <!--<p class="text-muted">Attribute Summary</p>-->
                    <div class="table-responsive" id="metaDataTableContainer">
                        <table class="table table-hover table-sm text-left">
                            <thead>
                            <tr class="text-muted">
                                <th>Attribute</th>
                                <th>Type</th>
                                <th>Aliases</th>
                                <th>Unique&nbsp;#</th>
                                <th class="text-no-wrap">Domain / Range</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4" >
                <div class="panel panel-default">
                    <div class="panel-heading white-bg">
                        <div class="panel-title" style="height: 30px;">
                            Vega-Lite Spec
                            <span class="btn btn-success btn-sm pull-right" type="button" id="vegaSpecBtn">
                                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>&nbsp;&nbsp;Run
                            </span>
                        </div>
                    </div>
                    <div class="panel-body p-none" style="height: calc(100vh - 230px); overflow: auto;">
                        <div id="inputContainer" ></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading white-bg">
                        <div class="panel-title">Visualization</div>
                    </div>
                    <div class="panel-body" style="height: calc(100vh - 220px);">
                        <div style="height: calc(100% - 200px); overflow: auto;" id="outputVisContainer" align="center"></div>
                        <hr>
                        <div style="height: 170px; overflow-x: auto; display:flex;" id="visThumbnailContainer">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div class="loadingModal"></div>
</div>
</body>

<!--JS files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.1/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/json-tree-viewer@0.0.1/libs/jsonTree/jsonTree.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.51.0/codemirror.min.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

<script src="{{ url_for('vleditor.static', filename='js/global.js') }}"></script>
<script src="{{ url_for('vleditor.static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('vleditor.static', filename='js/ui.js') }}"z></script>
<script src="{{ url_for('vleditor.static', filename='js/main.js') }}"></script>

</html>
